import React from "react";
import {Form, Input, Select, SelectProps} from "antd";
import {FormItemProps} from "antd";
import {InputProps} from "antd";

const Search = Input.Search;
const formItemLayout = {};
const FormItem = Form.Item;

interface FormItemType extends FormItemProps {
    noLayout?: boolean;
    width?: number | string;
    layout?: any;
}

interface SelectFormItemProps extends SelectProps, FormItemType {
    children?: any;
    status?: any;
    itemStyle?: any;
}

interface InputFormItemProps extends InputProps, FormItemType {
    itemStyle?: any;
    children?: any;
    name?: any;
    onReset?: any;
    status?: any;
    width?: any;
}

export const SelectFormItem: React.FC<SelectFormItemProps> = ({
    name,
    label,
    extra,
    initialValue,
    noLayout = false,
    required = false,
    disabled = false,
    options = [],
    width = 240,
    itemStyle = {},
    showSearch = false,
    allowClear = false,
    layout = formItemLayout,
    rules = [],
    tooltip = "",
    onChange,
    ...restProps
}) => (
    <FormItem
        {...(noLayout ? {} : layout)}
        label={label}
        name={name}
        initialValue={initialValue}
        rules={[{required, message: `请选择${label}`}, ...rules]}
        tooltip={tooltip}
        extra={extra}
    >
        <Select
            showSearch={showSearch}
            allowClear={allowClear}
            style={{width, ...itemStyle}}
            placeholder={`请选择${label}`}
            onChange={onChange}
            disabled={disabled}
            options={options}
            {...restProps}
        />
    </FormItem>
);

export const InputFormItem: React.FC<InputFormItemProps> = ({
    name,
    label = "",
    initialValue = "",
    required = false,
    layout = formItemLayout,
    rules = [],
    tooltip = "",
    itemStyle = {},
    extra = "",
    hidden = false,
    ...restProps
}) => (
    <FormItem
        {...layout}
        label={label}
        name={name}
        initialValue={initialValue}
        rules={[{required, message: `请输入${label}`}, ...rules]}
        hidden={hidden}
        tooltip={tooltip}
        style={itemStyle}
        extra={extra}
    >
        <Input placeholder={`请输入${label}`} allowClear {...restProps} />
    </FormItem>
);

export const CustomFormItem: React.FC<FormItemType> = ({
    required = false,
    layout = formItemLayout,
    rules = [],
    label = "",
    name = "",
    children,
    noLayout = false,
    ...restProps
}) => (
    <FormItem
        required={required}
        label={label}
        name={name}
        rules={[{required: required, message: `请输入${label}`}, ...rules]}
        labelCol={noLayout ? {} : layout.labelCol}
        {...restProps}
    >
        {children}
    </FormItem>
);

export const SearchFormItem = ({
    label = "",
    rules = [],
    tooltip = "",
    style = {},
    width = 240,
    required = false,
    onSearch,
}) => (
    <CustomFormItem
        label={label}
        required={required}
        style={style}
        tooltip={tooltip}
        rules={[{required: required, message: `请输入${label}`}, ...rules]}
    >
        <Search style={{width}} allowClear onSearch={onSearch} placeholder={`请输入${label}`} />
    </CustomFormItem>
);
